<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no ,initial-scale=1.0, minimum-scale=1.0, maximum=1.0">
  <!-- 引入 favicon 图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入 css 样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引入字体图标样式 -->
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <title>bilibili-干杯~~~</title>
</head>

<body>
  <!-- 头部模块 -->
  <header class="suspension">
    <div class="m-navbar">
      <!-- logo -->
      <a href="#" class="logo">
        <i class="iconfont Navbar_logo"></i>
      </a>
      <div class="right">
        <a href="#" class="search">
          <i class="iconfont ic_search_tab"></i>
        </a>
        <a href="#" class="face">
          <img src="./images/login.png" alt="">
        </a>
        <div class="app-btn">下载 App</div>
      </div>
    </div>
    <div class="channel-menu">
      <div class="tabs">
        <div class="tabs-list">
          <a href="#" class="active">首页</a>
          <a href="#">动画</a>
          <a href="#">番剧</a>
          <a href="#">国创</a>
          <a href="#">音乐</a>
          <a href="#">舞蹈</a>
          <a href="#">游戏</a>
          <a href="#">知识</a>
          <a href="#">科技</a>
          <a href="#">运动</a>
          <a href="#">汽车</a>
          <a href="#">生活</a>
          <a href="#">美食</a>
          <a href="#">动物圈</a>
          <a href="#">鬼畜</a>
          <a href="#">时尚</a>
          <a href="#">娱乐</a>
          <a href="#">影视</a>
          <a href="#">纪录片</a>
          <a href="#">电影</a>
          <a href="#">电视剧</a>
          <a href="#">直播</a>
          <a href="#">课堂</a>
          <!-- 粉红线 -->
           <div class="line"></div>
        </div>
      </div>
      <div class="after">
        <i class="iconfont general_pulldown_s"></i>
      </div>
    </div>
  </header>
  <!-- 主体模块 -->
  <div class="m-home">
    <div class="video-list">
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
      <a href="#" class="video-item">
        <div class="card">
          <img src="./images/dog.jpg@480w_270h_1c" alt="">
          <!-- 播放量 -->
          <div class="count">
            <span>
              <i class="iconfont icon_shipin_bofangshu"></i>
              108.1万
            </span>
            <span>
              <i class="iconfont icon_shipin_danmushu"></i>
              2.3万
            </span>
          </div>
        </div>
        <p class="title ellipsis-2">【无限暖暖】1.0公测一条龙全收集 宝箱+奇想星+灵感露珠+任务+打卡点+小游戏 纪念山地/花愿镇/福鸣之井/愿望梦境仓库/微风绿野</p>
      </a>
    </div>
  </div>
  <!-- 底部模块 -->
  <footer class="app">
    <div class="btn">
      <i class="iconfont Navbar_logo"></i>
      打开App，看你感兴趣的视频
    </div>
  </footer>
</body>

</html>